<template>
  <view class="container">
    <view class="team-info">
      <view class="stats">
        <view class="stat">
          <text>今日入库></text>
          <text>笔数：0 数量：0</text>
        </view>
        <view class="stat">
          <text>今日出库></text>
          <text>笔数：0 数量：0</text>
        </view>
      </view>
    </view>

    <view class="section">
      <text class="section-title">操作</text>
	  <text class="my-records">审核>></text>
      <view class="operations">
        <view class="operation">
          <image src="/static/icons/inventory-in.svg" class="icon"/>
          <text>入库</text>
        </view>
        <view class="operation">
          <image src="/static/icons/inventory-out.svg" class="icon"/>
          <text>出库</text>
        </view>
        <view class="operation">
          <image src="/static/icons/transfer.svg" class="icon"/>
          <text>调拨</text>
        </view>
        <view class="operation">
          <image src="/static/icons/inventory-check.svg" class="icon"/>
          <text>盘点</text>
        </view>
      </view>
    </view>

    <view class="section">
      <text class="section-title">记录</text>
      <text class="my-records">我的记录>></text>
      <view class="records">
        <view class="record" @click="InventoryPlanList()">
          <image src="/static/icons/inventory-in-record.svg" class="icon"/>
          <text>入库单</text>
        </view>
        <view class="record">
          <image src="/static/icons/inventory-out-record.svg" class="icon"/>
          <text>出库单</text>
        </view>
        <view class="record">
          <image src="/static/icons/transfer-record.svg" class="icon"/>
          <text>调拨单</text>
        </view>
        <view class="record">
          <image src="/static/icons/inventory-check-record.svg" class="icon"/>
          <text>盘点单</text>
        </view>
      </view>
    </view>

    <view class="section">
      <text class="section-title">库存</text>
      <view class="inventory">
        <view class="inventory-option">
          <image src="/static/icons/inventory-query.svg" class="icon"/>
          <text>库存查询</text>
        </view>
        <view class="inventory-option">
          <image src="/static/icons/inventory-warning.svg" class="icon"/>
          <text>库存预警</text>
        </view>
        <view class="inventory-option">
          <image src="/static/icons/expiry-warning.svg" class="icon"/>
          <text>过期预警</text>
        </view>
      </view>
    </view>

    <view class="section">
      <text class="section-title">基础数据设置</text>
      <view class="basic-data">
        <view class="data-option">
          <image src="/static/icons/warehouse-management.svg" class="icon"/>
          <text>仓库管理</text>
        </view>
        <view class="data-option">
          <image src="/static/icons/product-category.svg" class="icon"/>
          <text>商品分类</text>
        </view>
        <view class="data-option">
          <image src="/static/icons/product-management.svg" class="icon"/>
          <text>商品管理</text>
        </view>
        <view class="data-option">
          <image src="/static/icons/supplier-management.svg" class="icon"/>
          <text>往来单位</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 可以在此定义数据
    };
  },
  methods: {
    InventoryPlanList(page) {
      // uni.navigateTo({
      //   url: `/pages/home/InventoryPlanList`
      // });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 10px;
  background-color: #f8f8f8;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #3b5998;
  color: #fff;
  padding: 10px;
}
.time {
  font-size: 16px;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.team-info {
  margin: 10px 0;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.team-name {
  font-size: 16px;
  margin-bottom: 10px;
}
.stats {
  display: flex;
  justify-content: space-between;
}
.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section {
  margin: 10px 0;
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.section-title {
  font-size: 16px;
  margin-bottom: 10px;
}
.operations, .records, .inventory, .basic-data {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}
.operation, .record, .inventory-option, .data-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 5px 0;
}
.icon {
  width: 40px;
  height: 40px;
}
.my-records {
  align-self: flex-end;
  color: #3b5998;
  cursor: pointer;
}
.links {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
}
.link {
  color: #3b5998;
  cursor: pointer;
}
.footer {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 10px;
  border-top: 1px solid #ddd;
}
.footer-item {
  text-align: center;
}
</style>
